<template>
  <div v-if="visible" class="gis-config-container position-right">
    <div class="setting-title">
      <div class="panel-name">GIS配置</div>
      <div class="close-icon" @click="closeGisSetting">
        <a-icon-font type="iconicon-beifen1" />
      </div>
    </div>
    <div class="setting-content">
      <div class="divider"></div>
      <div class="basic-info"></div>
      <div class="divider"></div>

      <div class="setting-item">
        <div class="node-style-layout-header" @click="layerClose = !layerClose">
          图层
          <span class="arrow-icon">
            <a-icon :type="layerClose ? 'right' : 'down'" />
          </span>
        </div>

        <div
          class="node-style-content"
          style="padding: 0;"
          :class="{ 'close-fold': layerClose }"
        >
          <a-tree :tree-data="treeData" show-icon default-expand-all>
            <a-icon slot="switcherIcon" type="down" />
            <a-icon-font slot="gis" type="iconditu2" />
            <a-icon-font slot="circle" type="icondian" />
            <a-icon-font slot="line" type="iconxian" />
            <a-icon-font slot="fill" type="iconmian" />
          </a-tree>
        </div>
      </div>

      <div class="divider"></div>
      <!-- GIS 图层 -->

      <div class="divider"></div>
      <!-- 地图样式 -->
      <div class="setting-item">
        <div class="node-style-layout-header" @click="styleClose = !styleClose">
          样式
          <span class="arrow-icon">
            <a-icon :type="styleClose ? 'right' : 'down'" />
          </span>
        </div>

        <div
          class="node-style-content"
          style="padding: 0;"
          :class="{ 'close-fold': styleClose }"
        >
          <div class="sub-item">
            <!-- 地图设置 -->
            <map-style-set
              :map-type="currentMapConfig.mapType"
              :tile-style="currentMapConfig.tileStyle"
              @change-tile-style="changeTileStyle"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import KGraphStore from '@/store/modules/k-graph'
import MapStyleSet from '@/components/knowledge-gis/MapStyleSet.vue'

@Component({
  components: {
    MapStyleSet,
  },
})
export default class GisConfigPanel extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  @Prop({ type: Object, default: () => ({}) }) currentMapConfig!: any

  public changeTileStyle(mapTypeStyle: { mapType: number; tileStyle: number }) {
    this.$emit('setting', { type: 'mapTypeStyle', value: mapTypeStyle })
  }

  // 图层数组
  public get gisLayerList() {
    return KGraphStore.layerList.filter(
      (layer: any) => layer.source === 'gis' //  显示 gis type  图层
    )
  }

  @Watch('gitLayerList', { deep: true })
  public onGitLayerListChange(layers: any) {
    this.generateLayerTree(layers)
  }

  @Watch('visible')
  public onVisibleChange(value: boolean) {
    if (value) {
      this.generateLayerTree(this.gisLayerList)
    }
  }

  /**
   * 生成树
   */
  public generateLayerTree(layers: any[]) {
    const children: any[] = []
    layers.forEach((layer: any) => {
      children.push({
        title: layer.name,
        key: layer.id,
        slots: { icon: layer.type },
      })
    })
    this.treeData = [
      {
        title: 'GIS',
        key: '0-0',
        slots: {
          icon: 'gis',
        },
        children,
      },
    ]
  }

  // gis 图层树（不包含知识图谱这边的）
  public treeData: any = []

  public layerClose: boolean = false
  public styleClose: boolean = false

  public closeGisSetting() {
    KGraphStore.setCurrentToolBarAction(null)
  }
}
</script>

<style lang="less" scoped>
.position-right {
  right: 0;
}

.gis-config-container {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  height: 100%;
  position: absolute;
  top: 1px;
  width: 300px;

  .setting-title {
    align-items: center;
    // cursor: grab;
    display: flex;
    justify-content: space-between;
    margin: 9px 12px;

    .close-icon {
      cursor: pointer;
    }
  }

  .setting-content {
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 10px;
    position: relative;
    width: 100%;
  }

  .divider {
    border-top: 1px solid #e9e9e9;
    height: 1px;
    left: 0;
    margin: 0;
    position: absolute;
    width: 100%;
  }

  .setting-item {
    display: block;
    flex-flow: column wrap;
    justify-content: flex-start;
  }

  .close-fold {
    display: none;
  }

  // header
  .node-style-layout-header {
    align-items: center;
    // background-color: #f9f9fc;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 38px;
    justify-content: space-between;
    letter-spacing: 1px;
    margin-bottom: 12px;
    user-select: none;

    > span {
      color: #5d637e;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }

  /deep/ .ant-tree li .ant-tree-switcher {
    position: absolute;
    right: 5px;
  }
}
</style>
